Create Editable Bundles in Advanced Merchandising Rules

This document contains instructions for creating rules in Advanced Merchandising, allowing retailers to create specific sets of recommendations. For more information about what Advanced Merchandising can do, see Advanced Merchandising Rules.

Note: Advanced Merchandising must be turned on by Algonomy for the site before you can begin.

This page is intended for those who are responsible for creating and maintaining Advance Merchandising Rules and who are familiar with the site and placements as well as other existing rules.

Creating Bundles

This How-To covers how an Advanced Merchandising rule can be used to return JSON appropriate for client-side developers to display an editable bundle of products. The goal is to facilitate showing a seed product along with related recommended products, and a list of potential alternatives for each recommendation. Ultimately, the end user should be able to "edit" the bundle by selecting from among a set of alternatives, and add the entire bundle – seed item with selected products – to her shopping cart.

Below is a mockup of a web-based user interface displaying an editable dynamic bundle:

There are three steps in this example for Recommend to create and deliver JSON to support this use case using Advanced Merchandising:

Building an Advanced Merchandising rule to return the seed item, and the recommendations that make up the bundle, including recommended bundled item(s) and alternatives.
Creating a Placement and a special JSON Layout that will deliver JSON in a format that is easy for client-side developers to use.
Building the client-side code that displays and allows editing of the bundle, e.g.: JavaScript and HTML that allows a shopper to select which products in the bundle she wishes to purchase and add those products to her shopping cart. (Creating the client-side code should be the responsibility of the customer.)

Note: Server-side integrations can also leverage bundles, but the Layout control resides on the client's end. Members of the Algonomy CS Consulting team can and should be leveraged to guide these clients in how to structure the Layout.

Building the Advanced Merchandising Rule for a Bundle

An Advanced Merchandising rule to return the necessary results should have a single product – the seed item – as its context, and at least two recommendation groups. The first recommendation group should have only one item, the seed item itself. In other words, the criteria for the recommendation group should be a Product, which is the same as the seed product for the entire bundle. This ensures the first item returned by p13n is the seed item. The name of the first recommendation group does not matter, assuming the rule is to be used with the sample JSON layout that accompanies this article. Recommendation group names will appear in Experience Browser and other logging, so make sure it is something easily identifiable and differentiated.

The second recommendation group should have at least two (but there can be more) recommended items. The first item will be the proposed bundled item (i.e., the item that's recommended to be purchased along with the seed product), and the additional items will be alternatives to that item. Below is an example of a recommendation group with a recommended item and alternatives.

In the above example, there is only one bundled item with a set of alternative selections, but with the JSON layout used in this example it is possible to add additional bundled items and related alternatives to a bundle. For example, a client may want to suggest their shoppers buy a laptop bundle that includes a laptop (seed item), a mouse, external monitor and a printer.

Example with multiple recommendation groups (zoom in to enlarge): http://rrcs.cachefly.net/clients/dynamic_bundle_ex/Dynamic_Bundle_Rule_Ex.png.

Placement and JSON Layout

Because a bundle is based on an item (a single product as its context) an "Item Page" placement or other placement type focused on a single product should be used, as opposed to "Category Page" or page that requires a different type of seed.

Instead of delivering the set of recommendations in an unstructured list as with a standard JSON layout, a JSON layout that delivers JSON in a more structured and easier-to-parse format has been developed for bundles. Below is an example of the finished JSON structure available to client-side developers via the usual JavaScript callback function after p13n finishes executing.

Copy

{
  "placements": [
    {
      "strategy": "AdvancedMerchandisingStrategy",
      "placement_name": "item_page.Dynamic_Bundle_Ex",
      "message": "Sample Electronics Bundle",
      "bundle": {
        "seed_item": {
          "id": "22610824",
          "name": "&quot;HP Winter Blue 15.6\\&quot; 2000-2b19wm Laptop PC with AMD E-300 Accelerated Processor and Windows 8 Operating System&quot;",
          "linkURL": "https:\/\/recs.richrelevance.com\/rrserver\/click?a=showcaseparent&vg=f4f171c5-056f-40f6-d16b-63598da9a03b&pti=1&pa=Dynamic_Bundle_Ex&hpi=12503&stn=AdvancedMerchandisingStrategy&stid=300&rti=2&sgs=&u=3242342342344&mvtId=-1&mvtTs=1538515565661&uguid=85ecdd0a-48f4-49b4-f682-f158fdeba836&channelId=WEB&s=3243268987675&pg=1802&amrId=31228&p=22610824&ind=0&ct=http%3A%2F%2Flabs.richrelevance.com%2Fstorre%2Fcatalog%2Fproduct%2Fview%2Fsku%2F22610824",
          "imageURL": "http:\/\/labs.richrelevance.com\/storre\/media\/catalog\/product\/h\/p\/hp-winter-blue-15.6quot-2000-2b19wm-laptop-pc-with-amd-e-300-accelerated-processor-and-windows-8-operating-system-39e44275558e22a52a1c9976e89ac170.jpg",
          "price": "0.01",
          "recommendation_group": "seed",
          "item_index": "0"
        },
        "recommendation_groups": [
          {
            "mice and keyboards": {
              "bundled_item": {
                "id": "11987393",
                "name": "Centon 32GB DataStick Pro USB 2.0 Flash Drive, Gray",
                "linkURL": "https:\/\/recs.richrelevance.com\/rrserver\/click?a=showcaseparent&vg=f4f171c5-056f-40f6-d16b-63598da9a03b&pti=1&pa=Dynamic_Bundle_Ex&hpi=12503&stn=AdvancedMerchandisingStrategy&stid=300&rti=2&sgs=&u=3242342342344&mvtId=-1&mvtTs=1538515565661&uguid=85ecdd0a-48f4-49b4-f682-f158fdeba836&channelId=WEB&s=3243268987675&pg=1802&amrId=31228&p=11987393&ind=1&ct=http%3A%2F%2Flabs.richrelevance.com%2Fstorre%2Fcatalog%2Fproduct%2Fview%2Fsku%2F11987393",
                "imageURL": "http:\/\/labs.richrelevance.com\/storre\/media\/catalog\/product\/c\/e\/centon-32gb-datastick-pro-usb-2.0-flash-drive-gray-c731c469fa41088a6e6633edd668a737.jpg",
                "price": "0.01",
                "recommendation_group": "mice and keyboards",
                "item_index": "1"
              },
              "alternate_items": [
                {
                  "id": "14301743",
                  "name": "Logitech Corded Mouse M100",
                  "linkURL": "https:\/\/recs.richrelevance.com\/rrserver\/click?a=showcaseparent&vg=f4f171c5-056f-40f6-d16b-63598da9a03b&pti=1&pa=Dynamic_Bundle_Ex&hpi=12503&stn=AdvancedMerchandisingStrategy&stid=300&rti=2&sgs=&u=3242342342344&mvtId=-1&mvtTs=1538515565661&uguid=85ecdd0a-48f4-49b4-f682-f158fdeba836&channelId=WEB&s=3243268987675&pg=1802&amrId=31228&p=14301743&ind=2&ct=http%3A%2F%2Flabs.richrelevance.com%2Fstorre%2Fcatalog%2Fproduct%2Fview%2Fsku%2F14301743",
                  "imageURL": "http:\/\/labs.richrelevance.com\/storre\/media\/catalog\/product\/l\/o\/logitech-corded-mouse-m100-6b576f6c74b4b24454c03d766b738224.jpg",
                  "price": "0.01",
                  "recommendation_group": "mice and keyboards",
                  "item_index": "2"
                },
                {
                  "id": "7754462",
                  "name": "Memorex 05621 DVD+R 100PK 16X Spindle",
                  "linkURL": "https:\/\/recs.richrelevance.com\/rrserver\/click?a=showcaseparent&vg=f4f171c5-056f-40f6-d16b-63598da9a03b&pti=1&pa=Dynamic_Bundle_Ex&hpi=12503&stn=AdvancedMerchandisingStrategy&stid=300&rti=2&sgs=&u=3242342342344&mvtId=-1&mvtTs=1538515565661&uguid=85ecdd0a-48f4-49b4-f682-f158fdeba836&channelId=WEB&s=3243268987675&pg=1802&amrId=31228&p=7754462&ind=3&ct=http%3A%2F%2Flabs.richrelevance.com%2Fstorre%2Fcatalog%2Fproduct%2Fview%2Fsku%2F7754462",
                  "imageURL": "http:\/\/labs.richrelevance.com\/storre\/media\/catalog\/product\/m\/e\/memorex-05621-dvdr-100pk-16x-spindle-accbc15a9abbd078257a34533fa69634.jpg",
                  "price": "0.01",
                  "recommendation_group": "mice and keyboards",
                  "item_index": "3"
                },
                {
                  "id": "13029056",
                  "name": "Dell 90-Watt Inspiron AC Power Adapter",
                  "linkURL": "https:\/\/recs.richrelevance.com\/rrserver\/click?a=showcaseparent&vg=f4f171c5-056f-40f6-d16b-63598da9a03b&pti=1&pa=Dynamic_Bundle_Ex&hpi=12503&stn=AdvancedMerchandisingStrategy&stid=300&rti=2&sgs=&u=3242342342344&mvtId=-1&mvtTs=1538515565661&uguid=85ecdd0a-48f4-49b4-f682-f158fdeba836&channelId=WEB&s=3243268987675&pg=1802&amrId=31228&p=13029056&ind=4&ct=http%3A%2F%2Flabs.richrelevance.com%2Fstorre%2Fcatalog%2Fproduct%2Fview%2Fsku%2F13029056",
                  "imageURL": "http:\/\/labs.richrelevance.com\/storre\/media\/catalog\/product\/d\/e\/dell-90-watt-inspiron-ac-power-adapter-fa131a4f334138ec5f137cc68aa8ddeb.jpg",
                  "price": "0.01",
                  "recommendation_group": "mice and keyboards",
                  "item_index": "4"
                }
              ]
            }
          }
        ]
      }
    }
  ]
}

JSON Layout

To deliver JSON in the above format that supports working with bundles, a special layout has been developed. A screenshot of the layout follows:

Layout for cut-and-paste: http://rrcs.cachefly.net/clients/dynamic_bundle_ex/dynamic_bundle_layout.js.

Client-Side Code

Rendering the bundle JSON in the browser via client-side JavaScript is straight-forward once you know the final structure of the bundle JSON. Click here for a working example. Viewing the source shows the p13n setup and rendering code, which uses the JQuery library.

Note: A live example of editable bundles is currently available on the Showcase-Parent site in PROD:

AM Rule

Showcase-Parent -> Rules -> Advanced Merchandising -> Dynamic Bundle Ex https://portal.richrelevance.com/advmerch/rules.jsp#/31228

Placement

Showcase-Parent -> Placements -> Item_page.Dynamic_Bundle_Ex

Layout

Showcase-Parent -> Placements -> Layouts -> Dynamic_Bundle_JSON_Ex

https://portal.richrelevance.com/rrportal/layoutEditor2.jsp?id=45593

Demo video

https://richrelevance.egnyte.com/dl/U5yHqaxh2O/ENG-13029-demo.mov_

Reordering Recommendations

Once you have created recommendation clauses, you can reorder the recommendations displayed by clicking Screen Shot 2015-05-05 at 5.55.28 PM.pngCollapse Recommendation and using the Screen Shot 2015-05-05 at 5.55.48 PM.png icon to drag and drop to change order. To confirm the recommendations are reordered, you can click Screen Shot 2015-05-05 at 5.55.37 PM.pngExpand Recommendations .

What happens next?

Your rule takes affect 2 to 4 hours after you save it. All advanced merchandising rules take priority over other merchandising rules.